<template>
  <dv-full-screen-container>
    <div class="contain">
      <dv-border-box-11 title="圆 融 签 到">
        <div class="nav">
          <!-- <el-input v-model="number" @input="keydown"></el-input> -->
          <div class="data">
            <div>
              <dv-digital-flop :config="config" style="width:200px;height:50px;" />
            </div>
            <div>
              <dv-digital-flop :config="config1" style="width:200px;height:50px;" />
            </div>
          </div>
          <div class="table">
            <dv-scroll-board :config="table" style="width:100%;" class="dvtable" />
          </div>
        </div>
      </dv-border-box-11>
      <div class="mask" v-if="show">
        <div class="m-title">签到成功</div>
        <dv-decoration-5 style="width:100%;height:40px;" />
        <div class="l1 l">尊敬的{{ info.name }} </div>
        <!-- <div class="l2 l"> 欢迎来都的圆融会展</div> -->
        <div class="l3 l">座位号是</div>
        <div class="l4 l">{{ info.position }}</div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import _ from 'lodash'
import { getInfoByCode, getPeoPleNo, getSignNo } from "@/api/bussiness/userMeeting";
export default {
  name: "Screen",
  data() {
    return {
      number: null,
      channel: null,
      config: {
        number: [588],
        content: "应到:"
      },
      config1: {
        number: [600],
        content: "实到:"
      },
      show: false,
      info: null,
      table: {
        headerHeight: 120,
        header: ["姓名", "单位", "座位号", "签到时间"],
        align: ['center', 'center', 'center', 'center'],
        indexHeader: '序号',
        index: true,
        data: [


        ]
      }
    };
  },
  created() {
    // 创建一个广播通道
    this.channel = new BroadcastChannel('myChannel');
    // 监听消息事件
    this.channel.onmessage = _.debounce((event) => {

      this.getMsg(event)
    })
    this.init()

  },

  methods: {
    async init() {
      try {
        let p = { isSgin: 1 }
        let [res, res1] = await Promise.all([getPeoPleNo(), getSignNo(p)])
        const { data } = res
        const data1 = res1.data
        this.config = {
          number: [data.allPeopleCount],
          content: "应到:{nt}人"
        }
        this.config1 = {
          number: [data.signCount],
          content: "实到:{nt}人"
        }
        let table = _.cloneDeep(this.table)
        table.header = table.header.map(item => {
          return this.setStyle(item, 'font-size: 30px;')
        })
        let style = "font-size: 20px;"
        table.data = data1.map(item => {
          item.userName = item.userName.substring(0, 1) + "**"
          let d1 = this.setStyle(item.userName, style)
          let d2 = this.setStyle(item.company, style)
          let d3 = this.setStyle(item.position, style)
          let d4 = this.setStyle(item.startTime, style)
          return [d1, d2, d3, d4]
        })
        this.table = table
      } catch (error) {
        console.log(error)
      }



    },
    setStyle(msg, style) {
      return `<span style="${style};">${msg || ''}</span>`
    },
    getMsg(data) {
      this.getInfo(data.data)
    },

    async getInfo(customerNumber) {
      const res = await getInfoByCode(customerNumber)
      if (res.code == 200) {
        this.info = res.data
        this.init()
        this.show = true

        setTimeout(() => {
          this.show = false
        }, 15000);
      }
    },
    keydown(data) {
      console.log(data)

    }
  }
};
</script>

<style lang="scss" scoped>
.contain {
  background: #000000;
  height: 100vh;
  box-sizing: border-box;
}

.nav {
  box-sizing: border-box;
  padding: 60px;

  height: 100vh;
}

.data {
  display: flex;
}

.table {
  margin-top: 20px;
}

.dvtable {
  height: calc(100vh - 200px);
}

.mask {
  width: 40%;
  height: 500px;
  background: #003B51;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  border-radius: 10px;
  box-sizing: border-box;
  padding-top: 20px;
  box-shadow: 2px 2px 2px #141414b0;
  text-align: center;
}

.m-title {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  font-family: 黑体;
}

.l1 {
  font-size: 30px;
  margin-top: 30px;
}

.l4 {
  font-size: 45px;
  font-weight: bold;
}

.l {
  line-height: 60px;
}
</style>